<!-- eslint-disable prettier/prettier -->
<script setup lang="ts">
import { ref, onMounted } from "vue";
import dayjs from "dayjs";

const props = defineProps({
  param: {
    type: String,
    default: "",
  },
});

const key = ref("");
const type = ref("");
const value = ref("");
const numberValue = ref(0);
const emit = defineEmits(["update:modelValue"]);
const date = ref(new Date());

onMounted(() => {
  const param = props.param ? props.param.trim() : "";
  console.log(param);
  const sp = param.split(":");
  key.value = sp[0];
  type.value = sp.length > 1 ? sp[1] : "string";

  if (type.value === "date") {
    const str = dayjs(date.value).format("YYYY-MM-DD");
    emit("update:modelValue", "'" + str + "'");
  } else if (type.value === "datetime") {
    const str = dayjs(date.value).format("YYYY-MM-DD HH:mm:ss");
    emit("update:modelValue", "'" + str + "'");
  } else if (type.value === "number" || type.value === "int") {
    emit("update:modelValue", numberValue.value);
  }
});

const onDateChange = (val: Date) => {
  if (!val) return;
  const date = dayjs(val).format("YYYY-MM-DD");
  emit("update:modelValue", "'" + date + "'");
};

const onDateTimeChange = (val: Date) => {
  if (!val) return;
  const date = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
  emit("update:modelValue", "'" + date + "'");
};

const setValue = (val: string) => {
  const d = dayjs().format("YYYY") + "-" + val;
  date.value = dayjs(d).toDate();
};
</script>

<template>
  <div class="param">
    <span class="name">{{ key }}</span>
    <span class="split">: </span>

    <el-input-number
      v-if="type === 'number' || type === 'int'"
      v-model="numberValue"
      placeholder="请输入数值"
      style="width: 100%"
      @change="emit('update:modelValue', $event)"
    />
    <div v-else-if="type === 'date'" style="flex: auto">
      <el-date-picker
        v-model="date"
        type="date"
        :clearable="false"
        placeholder="选择一个日期"
        style="width: 100%"
        @change="onDateChange"
      >
      </el-date-picker>
      <el-radio-group size="small" style="width: 100%; font-size: 10px">
        <el-radio-button label="一季度" @click="setValue('01-01')" value="1" />
        <el-radio-button label="二季度" @click="setValue('04-01')" value="2" />
        <el-radio-button label="三季度" @click="setValue('07-01')" value="3" />
        <el-radio-button label="四季度" @click="setValue('10-01')" value="4" />
      </el-radio-group>
    </div>
    <div v-else-if="type === 'datetime'" style="flex: auto">
      <el-date-picker
        v-model="date"
        type="datetime"
        placeholder="选择一个日期时间"
        style="width: 100%"
        @change="onDateTimeChange"
      />
    </div>
    <el-input
      v-else
      v-model="value"
      placeholder="请输入文本"
      @input="emit('update:modelValue', '\'' + $event + '\'')"
    />
  </div>
</template>

<style scoped>
.name {
  width: fit-content;
  flex: none;
  min-width: 40px;
  text-align: right;
}

.param {
  display: flex;
  align-items: center;
  margin: 10px 0;
  width: 50%;
  padding-right: 10px;
}

.split {
  margin: 0 5px;
}
</style>
